/** 
 * 列表
 */
component.list = function (data={}, listener={}) {
    data = Object.assign({
        list: [],
        api: "",
        searchbar: [],
        hasLabel: true,
        bodyMap: [{title:"文章来源"},{title:"文章标题"},{title:"阅读人数"},{title:"提交人数"}]
    }, data);

    listener = util.objectInset({
        onrefresh(params, done) {},
        onloadmore(params, done) {},
        onclick(item) {},
        onclickbtn(item) {}
    }, listener);

    let page = 1;
    let size = 10;

    let DM = component.create(`<div class="app">
        <div class="search-container"></div>
        <div class="swiper-container">
            <div class="swiper-wrapper" data-refresh-text="释放刷新" data-loadmore-text=""></div>
        </div>
    </div>`);

    if (!util.isEmpty(data.searchbar)) {
        DM.el.classList.add("app-list");
        let SearchForm = component.create(`<form action="javascript:;" class="searchbar search"></form>`);

        data.searchbar.map(search => {
            switch (search) {
                case "date":
                    let radioGroupDM = component.create(`<div>
                        <div class="radio-group">
                            <label><input type="radio" name="date" value="" checked/><span>全部</span></label>
                            <label><input type="radio" name="date" value="week" /><span>本周</span></label>
                            <label><input type="radio" name="date" value="month" /><span>本月</span></label>
                        </div>
                    </div>`);
                    util.like2Array(radioGroupDM.querySelectorAll('[type="radio"]')).map(radio => {
                        radio.addEventListener("change", function (e) {
                            refresh.call(swiper);
                        });
                    });
                    SearchForm.append(radioGroupDM);
                    break;
                case "send_type":
                    let selectDM = component.create(`<div>
                        <select name="send_type" class="search-select">
                            <option value="">全部收集</option>
                            <option value="teacher">教师收集</option>
                            <option value="student">学生收集</option>
                        </select>
                    </div>`);
                    selectDM.appoint("select").addEventListener("change", function () {
                        refresh.call(swiper);
                    });
                    SearchForm.append(selectDM);
                    break;
            }

            DM.appoint(".search-container").append(SearchForm);
        });
    }

    let WrapperDM = DM.appoint(".swiper-wrapper");
    let SearchDM = DM.appoint(".search");
    let refreshEnd = false;
    let EmptyDM = component.listItemEmpty();
    let loadcontinue = true;

    function getSearch() {
        if (!SearchDM) {
            return {};
        }
        let fields = util.getFields(SearchDM.el);
        return fields;
    }

    function render(list, append=false) {
        // 是否追加模式
        if (!append) {
            swiper.removeAllSlides();
            EmptyDM.remove();
            WrapperDM.empty();
        }

        list = util.defaults(list, []);
        if (util.isEmpty(list)) {
            swiper.appendSlide(EmptyDM.el);
        } else {
            list.map(item => {
                swiper.appendSlide(component.listItem(item, listener, data).el);
            });
        }

        swiper.lazy.loadInSlide(0)
        swiper.lazy.load();
    }

    function refresh() {
        let args = util.like2Array(arguments);
        swiper.setTransition(this.params.speed);
        swiper.setTranslate(50);
        swiper.touchEventsData.isTouched = false;//跳过touchEnd事件后面的跳转(4.0.5)
        WrapperDM.el.setAttribute("data-refresh-text", "刷新中");
        swiper.allowTouchMove = false;
        loadcontinue = true;

        listener.onrefresh({
            page: page = 1,
            size: size,
            query: getSearch()
        }, function (list) {
            if (list === false) {
                refreshEnd = true;
                swiper.allowTouchMove = true;
                swiper.setTranslate(0);
                return;
            }
            
            render.call(this, list);

            WrapperDM.el.setAttribute("data-refresh-text", "刷新完成");
            refreshEnd = true;
            swiper.allowTouchMove = true;
            setTimeout(function () {
                swiper.setTranslate(0);
                swiper.lazy.load();
            }, 400)
        }, ...args);
    }

    function loadmore() {
        swiper.allowTouchMove=false;//禁止触摸
        swiper.params.virtualTranslate=true;//定住不给回弹
        WrapperDM.el.setAttribute("data-loadmore-text", "加载中");
        listener.onloadmore({
            page: page + 1,
            size: size,
            query: getSearch()
        }, function (list=[], is_continue=true) {
            swiper.params.virtualTranslate=false;
            swiper.allowTouchMove= true;
            page += 1;

            render.call(this, list, true);

            if (is_continue) {
                WrapperDM.el.setAttribute("data-loadmore-text", "上拉加载更多");
            } else {
                loadcontinue = false;
                WrapperDM.el.setAttribute("data-loadmore-text", "");
                swiper.appendSlide(`<div class="swiper-slide page__bd">
                    <div class="weui-loadmore weui-loadmore_line">
                        <span class="weui-loadmore__tips">没有更多数据了</span>
                    </div>
                </div>`);
            }
        });
    }
    
    var swiper = new Package.Swiper(DM.appoint('.swiper-container').el,{
        speed: 200,
        slidesPerView: 'auto',
        freeMode: true,
        direction: 'vertical',
        setWrapperSize: true,
        scrollbar: {
            el: '.swiper-scrollbar',
        },
        observer: true,
        observeParents: true,
        watchSlidesVisibility: true,
        lazy: true,
        loadPrevNext: true,
        on:{
            //下拉释放刷新
            touchEnd: function () {
                if (this.translate > 50) {
                    refresh.call(swiper);
                }
            },
            touchStart: function () {
                if (refreshEnd == true) {
                    WrapperDM.el.setAttribute("data-refresh-text", "释放刷新");
                    refreshEnd = false;
                }
            },
            lazyImageReady: function (e, slideEl, imageEl) {
                $(imageEl).addClass("lazy-done");
                swiper.lazy.load();
            },
            //加载更多
            momentumBounce: function () {//非正式反弹回调函数，上拉释放加载更多可参考上例
                swiper = this;
                if (swiper.translate < -100) {
                    if (loadcontinue) {
                        loadmore.call(swiper);
                    }
                }
            },
        }
    });

    swiper.refresh = refresh.bind(swiper);
    swiper.render = render.bind(swiper);
    render();
    DM.swiper = swiper;

    return DM;
}
